<template>
	<view>
		<view class="foot-top">浏览记录</view>
		<view class="list-style" @tap="changeListStyle">
		  <image v-if="!isLineProds" src="/static/images/list-row.png" />
		  <image v-else src="/static/images/list-line.png" />
		</view>
		<!-- 产品列表 -->
		<view v-if="prodList.length > 0" class="foots">
		  <block v-for="(item, index) in prodList" :key="index">
				<view class="date-box">
					<!-- <view class="date-background"> -->
					<view class="date">
						<view class="foot-year">{{ item.date.year }}年</view>
						<view class="foot-month">{{ item.date.month }}月</view>
						<view class="foot-day">{{ item.date.day }}日</view>
					</view>
					<!-- </view> -->
					<view :class="[isLineProds ? 'my-line-prods' : 'my-prods']">
						<block v-for="(item, index) in item.spus" :key="index" >
							<view class="item" @tap="toProdDetail(item.spuId)">
							<view class="img">
								<image :src="item.mainImgUrl" />
							</view>
							<view class="text-box">
								<view class="name">{{ item.spuName }}</view>
								<view class="price-box">
									<view class="price">
									<view class="symbol">￥</view>
									<view class="big">{{ wxs.parsePrice(item.priceFee)[0] }}</view>
									<view class="symbol">.{{ wxs.parsePrice(item.priceFee)[1] }}</view>
									</view>
								</view>
								</view>
							</view>
						</block>
					</view>
				</view>
		  </block>
		</view>
		<!-- 无商品显示 -->
		<view v-if="prodList.length===0" class="empty">
		  <view class="img">
			<image src="/static/empty-img/not-found.png" />
		  </view>
		  <view class="text">没有游览记录，快去逛逛吧</view>
		</view>
		<!-- 加载全部 -->
		<view v-if="isLoadAll" class="nomore">没有更多了，看看别的吧</view>
	</view>
</template>

<script module="wxs" lang="wxs" src="../../wxs/index.wxs"></script>
<script>
const http = require('../../utils/http.js')
const util = require('../../utils/util')
export default{
	data() {
	  return {
			isLineProds: true, // 列表格式，默认横排展示
	    isLoadAll: false, // 是否加载全部内容
			
			userId: 0,
			
	    pageQuery: { // 请求的参数
	      pageSize: 10, // 每页展示的个数
	      pageNum: 1, // 当前页
	      keyword: '', // 关键词
	      categoryId: '', // 第三级分类ID
	      sort: '' // 商品排序
	    },
			
			// 商品列表
			prodList: [],
	  }
	},
  onLoad: function(options) {
		if (options.userId) {
			this.userId = options.userId;
		}
  },
  onShow: function() {
		this.getHistory();
  },
	methods: {
		toProdDetail(spuId) {
		  uni.navigateTo({
		    url: '/pages/detail/detail?spuId=' + spuId
		  })
		},
		changeListStyle() {
		  this.isLineProds = !this.isLineProds
		},
		getHistory() {
      uni.showLoading()
		  const params = {
		    url: '/mall4cloud_product/history/list',
		    method: 'GET',
		    data: {
					userId: this.userId
				},
		    callBack: res => {
					if(res.length>0) {
						var day = '';
						var newDay = '';
						var date = [];
						var index = -1;
						for (var i = 0; i < res.length; i++) {
							newDay = res[i].create_time.substr(0,10);
							if( day != newDay ) {
								day = newDay;
								index++;
								date = day.split('-');
								date[0] = parseInt(date[0]);
								date[1] = parseInt(date[1]);
								date[2] = parseInt(date[2]);
								
								this.$set(this.prodList,index,{
									'date': {
										'year': date[0],
										'month': date[1],
										'day': date[2]
									},
									spus: []
								});
							}
							
							this.$set(this.prodList[index].spus,
								this.prodList[index].spus.length,
								{
									'mainImgUrl': res[i].mainImgUrl.substr(0,1) === '/' ? "http://10.25.21.250:9000/mall4cloud" + res[i].mainImgUrl : res[i].mainImgUrl,
									'spuName': res[i].name,
									'spuId': res[i].spuId,
									'priceFee': res[i].priceFee
							});
						}
					}
					uni.hideLoading()
		    }
		  }
		  http.request(params)
		}
	}
}
</script>

<style>
@import './my-foot.css';
</style>